<template>
	<view class="">
		<slot></slot>
		<up-popup :show="show" @close="close" :round="20">
			<view @click.stop class="address_popup">
				<view class="title_box fr-ac-jc">
					<view class="fs-30">
						{{popTitle}}
					</view>
					<view @click="close" class="iconfont">
						<up-icon name="close-circle" size="24"></up-icon>
					</view>
				</view>
				<view class="line"></view>
				<view class="picker_box">
					<view class="hierarchy_1 hierarchy">
						<view @click="hierarchy_1_pick(item,index)" :class="index == hierarchy_1_list_index? 'check':''"
							class="hierarchy_1_item" v-for="(item,index) in hierarchy_1_list" :key="index">
							{{item.name}}
						</view>
					</view>
					<view v-if="deep>1" class="hierarchy_2 hierarchy">
						<view @click="hierarchy_2_pick(item,index)" :class="index == hierarchy_2_list_index? 'check':''"
							class="hierarchy_2_item" v-for="(item,index) in hierarchy_2_list" :key="index">
							<view class="">
								{{item.name}}
							</view>
							<view v-if="hierarchy_2_list_index == index && deep==2" class="iconfont">
								<up-icon :color="publicStyles['--color']" name="checkbox-mark" size="24"></up-icon>
							</view>
						</view>
					</view>
					
					<view v-if="deep>2" class="hierarchy_3 hierarchy">
						<view @click="hierarchy_3_pick(item,index)" :class="index == hierarchy_3_list_index? 'check':''"
							class="hierarchy_3_item" v-for="(item,index) in hierarchy_3_list" :key="index">
							<view class="">
								{{item.name}}
							</view>
							<view v-if="hierarchy_3_list_index == index" class="iconfont">
								<up-icon :color="publicStyles['--color']" name="checkbox-mark" size="24"></up-icon>
							</view>
						</view>
					</view>
					
				</view>
				<view class="btns_box fr-ac-jsb">
					<view @click="close" class="btn btn1">
						取消
					</view>
					<view v-if="showReset" @click="reset" class="btn btn1 mx-20">
						重置
					</view>
					<view @click="confirm" class="btn btn2">
						确定
					</view>
				</view>
			</view>
		</up-popup>
	</view>


</template>

<script>
	import {
		addressList
	} from '@/assets/js/cityData.js'
	import {
		useColorStore
	} from '@/store/color'
	export default {
		data() {
			return {
				allAddress: [],
				value: [0, 0],
				array: [],
				index: 0,
				localArea: {},

				hierarchy_1_list: [],
				hierarchy_1_list_index: 0,
				hierarchy_2_list: [],
				hierarchy_2_list_index: 0,
				hierarchy_3_list: [],
				hierarchy_3_list_index: 0,
			}
		},
		props: {
			//选择器标题
			popTitle: {
				default: "选择地区",
				type:String
			},
			//是否显示
			show: {
				default: true,
				type:Boolean
			},
			//默认选择的省份
			province: {
				default: '',
				type:String
			},
			//默认选择的城市
			city: {
				default: '',
				type:String
			},
			//地区深度层级 默认2 省->市
			deep: {
				default: 2,
				type:Number
			},
			// 只显示特定的省份
			onlyProvince:{
				default: [],
				type:Array
			},
			showReset: {
				default: false,
				type:Boolean
			},
		},
		computed: {
			publicStyles() {
				return useColorStore().publicStyles
			}
		},
		watch:{
			// 监视 props 的变化，以便更新 pickerList
			show: {
			    handler(newVal) {
					if(newVal == true){
						if(this.province){
							this.hierarchy_1_list_index = this.hierarchy_1_list.findIndex(e=>e.name == this.province)
						}
						this.hierarchy_2_list = this.hierarchy_1_list[this.hierarchy_1_list_index].children
						if(this.city){
							this.hierarchy_2_list_index = this.hierarchy_2_list.findIndex(e=>e.name == this.city)
						}
					}
			    }
			}
		},
		created() {
			this.getAllAddress()
		},
		mounted() {},
		methods: {
			close() {
				this.$emit('close', {})
			},
			reset(){
				this.hierarchy_1_list_index = void 0
				this.hierarchy_2_list_index = void 0
				this.hierarchy_3_list_index = void 0
			},
			confirm() {
				this.close()
				if(this.deep==1){
					this.$emit('confirm', [
						void 0 === this.hierarchy_1_list_index ? '' : this.hierarchy_1_list[this.hierarchy_1_list_index].name,
					])
				}
				if(this.deep==2){
					this.$emit('confirm', [
						void 0 === this.hierarchy_1_list_index ? '' : this.hierarchy_1_list[this.hierarchy_1_list_index].name,
						void 0 === this.hierarchy_2_list_index ? '' : this.hierarchy_2_list[this.hierarchy_2_list_index].name,
					])
				}
				if(this.deep==3){
					this.$emit('confirm', [
						void 0 === this.hierarchy_1_list_index ? '' : this.hierarchy_1_list[this.hierarchy_1_list_index].name,
						void 0 === this.hierarchy_2_list_index ? '' : this.hierarchy_2_list[this.hierarchy_2_list_index].name,
						void 0 === this.hierarchy_3_list_index ? '' : this.hierarchy_3_list[this.hierarchy_3_list_index].name,
						void 0 === this.hierarchy_3_list_index ? '' : this.hierarchy_3_list[this.hierarchy_3_list_index].code,
					])
				}
				
			},
			hierarchy_1_pick(item, index) {
				this.hierarchy_1_list_index = index
				if(this.deep>1){
					this.hierarchy_2_list = item.children
					this.hierarchy_2_list_index = 0
				}
				if(this.deep>2){
					this.hierarchy_3_list = this.hierarchy_2_list[this.hierarchy_2_list_index].children
					this.hierarchy_3_list_index = 0
				}
			},
			hierarchy_2_pick(item, index) {
				this.hierarchy_2_list_index = index
				if(this.deep>2){
					this.hierarchy_3_list = item.children
					this.hierarchy_3_list_index = 0
				}
			},
			hierarchy_3_pick(item, index) {
				this.hierarchy_3_list_index = index
			},
			async getAllAddress() {
				console.log(addressList,'addressList')
				const res = {
					data: addressList
				}
				
				// const res = await getProvince({});
				if(this.onlyProvince.length){
					this.hierarchy_1_list = res.data.filter(e=>{
						return this.onlyProvince.includes(e.name)
					})
				}else{
					this.hierarchy_1_list = res.data
				}
				// console.log(this.hierarchy_1_list,'this.hierarchy_1_list')
				this.hierarchy_2_list = this.hierarchy_1_list[this.hierarchy_1_list_index].children
				this.hierarchy_3_list = this.hierarchy_2_list[this.hierarchy_2_list_index].children
			},
		}
	}
</script>

<style lang="scss">
	.color {
		color: var(--color);
	}

	.address_popup {
		margin: auto 0 0 0;
		width: 100%;
		box-sizing: border-box;
		padding: 0 0 50rpx 0;
		border-radius: 30rpx 30rpx 0 0;
		background-color: #113441;

		.title_box {
			padding: 40rpx 0;
			width: 100%;
			position: relative;

			.iconfont {
				position: absolute;
				right: 50rpx;
				top: 50%;
				transform: translateY(-50%);
			}
		}

		.line {
			height: 2rpx;
			width: 100%;
			background-color: var(--gray-line);
		}


		.picker_box {
			display: flex;
			height: 60vh;
			width: 100%;

			.hierarchy {
				height: 100%;
				overflow: scroll;
			}

			.hierarchy_1 {
				flex:1;

				.hierarchy_1_item {
					padding: 30rpx 0;
					text-align: center;
					color: #666;

					&.check {
						color: var(--color);
						background: var(--gray-line);
					}
				}


			}

			.hierarchy_2 {
				flex:1;
				// width: 65%;

				.hierarchy_2_item {
					padding: 30rpx 0;
					text-align: center;
					position: relative;

					&.check {
						color: var(--color);
						background: var(--gray-line);
						
						view {
							color: var(--color);
						}
					}

					.iconfont {
						position: absolute;
						top: 50%;
						right: 5%;
						transform: translateY(-50%);
					}
				}
			}
			
			.hierarchy_3 {
				flex:1;
			
				.hierarchy_3_item {
					padding: 30rpx 0;
					text-align: center;
					position: relative;
			
					&.check {
						color: var(--color);
						background: var(--gray-line);
						
						view {
							color: var(--color);
						}
					}
			
					.iconfont {
						position: absolute;
						top: 50%;
						right: 5%;
						transform: translateY(-50%);
					}
				}
			}
		}

		.btns_box {
			box-sizing: border-box;
			padding: 30rpx;

			.btn {
				width: 42%;
				padding: 20rpx;
				text-align: center;
				border-radius: 10rpx;
				font-weight: bold;
			}

			.btn1 {
				color: var(--color);
				border: 2rpx solid var(--color);
			}

			.btn2 {
				border: 2rpx solid var(--color);
				background-color: var(--color);
			}
		}
	}
</style>